import React, {Component, Fragment} from 'react';
import TodoItem from './TodoItem'
import './index.css';
// function App() {
//   return (
//     <div className="App">
//       hello ReactJS
//     </div>
//   );
// }

// 定义一个React组件
class TodoList extends Component {

    // 构造函数
    constructor(props) {
        // 初始化
        super(props);
        this.state = {
            list: [],
            inputValue: ''
        };
        // 绑定 this
        this.handelBtnClick = this.handelBtnClick.bind(this);
        this.handelInputChange = this.handelInputChange.bind(this);
        this.deleteItem = this.deleteItem.bind(this);
    }

    // input 取值从e.target.value 中
    handelInputChange(e) {
        this.setState({
            inputValue: e.target.value
        })
    }

    handelBtnClick() {
        // alert("click");
        // this 指向问题
        // this.state.list.push("hello word"); 行不通无法赋值
        // 设置 state 中list值通过setState方法
        this.setState({
            // es6 语法 list 增加
            list: [...this.state.list, this.state.inputValue],
            inputValue: '',// 清空 input 框值
        })
    }

    deleteItem(index) {
        // 解构赋值 ...
        const list = [...this.state.list];
        // 操作副本
        list.splice(index, 1);
        this.setState({list})
    }

    getTodoItems() {
        return (
            this.state.list.map((item, index) => {
                // return <li key={index} onDoubleClick={this.deleteItem.bind(this, index)}>{item}</li>
                // 父子间传值问题： 父=> 子 属性传值
                return (
                    <TodoItem
                        onDelete={this.deleteItem}
                        content={item}
                        index={index}
                        key={index}
                    />
                )
            })
        )
    }

    render() {
        // jsx 语法
        // js 表达式（非js语句）
        return (
            // 页面布局没有 div 外层 全称 React.Fragment
            <Fragment>
                <div className="App">
                    <input value={this.state.inputValue} onChange={this.handelInputChange}/>
                    {/*这是一个注释*/}
                    <button className='red-btn' onClick={this.handelBtnClick}>add</button>
                </div>
                <ul>{this.getTodoItems()}</ul>
            </Fragment>
        );
    }
}

export default TodoList;
